import React, { memo, useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { getSettleSingers } from "../../store/actionCreators";

import { SettleSingerWrapper } from "./style";
import ThemeHeaderSmall from "@/components/theme-header-small";

import { formatImageSize } from "@/utils/format-utils";

const SettleSinger = memo(() => {
  const dispatch = useDispatch();
  const { settleSings } = useSelector(state => ({
    settleSings: state.getIn(["recommend", "settleSings"])
  }), shallowEqual);

  useEffect(() => {
    dispatch(getSettleSingers(5, 5001));
  }, [dispatch]);

  return (
    <SettleSingerWrapper>
      <ThemeHeaderSmall 
        title="入驻歌手"
        more="查看更多>"
      />
      
      <div className="singer-list">
        {
          settleSings.map(item => {
            return (
              <a key={item.id} href=" " className="item">
                <img src={formatImageSize(item.img1v1Url, 62)} alt="" />
                <div className="info">
                  <div className="title">{item.alias.join("") || item.name}</div>
                  <div className="name">{item.name}</div>
                </div>
              </a>
            )
          })
        }
      </div>

      <div className="apply-for">
        <a href=" ">申请成为网易音乐人</a>
      </div>
    </SettleSingerWrapper>
  )
})

export default SettleSinger